<template>
  <!-- 患者库 -->
  <div id='patient'>
    <el-row>
      <el-col :span="24">
        <div style="margin:10px 10px 10px 10px">
          <span>患者姓名：</span>
          <el-input
            size='small'
            v-model="patient.name"
            placeholder="请输入姓名"
          />&nbsp;&nbsp;
          患者电话：
          <el-input
          size='small'
            oninput="value=value.replace(/[^\d.]/g,'')"
            v-model="patient.php"
            placeholder="请输入手机号"
          />&nbsp;&nbsp;
          <el-button
          size='small'
            @click="selectpatientbynameAndphp()"
            type="primary"
          >查询</el-button>
          <el-button size='small' @click="reslt()">重置</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top:20px">
      <el-col :span="24">
        <el-table
          :data="
            patientlist.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          height="485"
          :header-cell-style="{
            backgroundColor: '#eef5ff',
            textAlign: 'center',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            sortable
            prop="patientId"
            label="序号"
          ></el-table-column>
          <el-table-column label="更新时间">
            <template slot-scope="sc">
              {{ new Date(sc.row.updateTime * 1000).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="患者姓名"></el-table-column>
          <el-table-column label="性别">
            <template slot-scope="sc">
              {{ sc.row.sex == 1 ? "男" : "女" }}
            </template>
          </el-table-column>
          <el-table-column label="年龄">
            <template slot-scope="sc">
              {{
                new Date().getFullYear() -
                new Date(sc.row.birthday).getFullYear()
              }}
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="电话"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="sc">
              <el-button size='mini' @click="viewdata(sc.row, 1)" type="primary"
                >查看</el-button
              >
              <el-button size='mini' @click="viewdata(sc.row, 2)" type="">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row style="margin-top:20px">
      <el-col :span="24">
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="patientlist.length"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 查看框 -->
    <el-dialog title="患者详情" :visible.sync="selectpatient">
      <!-- 1患者信息 -->
      <el-descriptions title="患者信息">
        <el-descriptions-item label="患者名">{{
          hz.name
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ hz.php }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{
          hz.birthday
        }}</el-descriptions-item>
        <el-descriptions-item label="居住地">{{
          hz.address
        }}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{
          hz.createTime
        }}</el-descriptions-item>
      </el-descriptions>
      <!-- 历史病例 -->
      <b style="font-size: 16px">历史病例</b>
      <el-table height="250" :data="hz.historylist">
        <el-table-column property="id" label="病例ID" width="" />
        <el-table-column
          property="dzmHisDepartment.departmentName"
          label="就诊科室"
          width=""
        />
        <el-table-column
          property="dzmHisDoctor.trueName"
          label="就诊医生"
          width=""
        />
        <el-table-column label="就诊类型" width="">
          <template slot-scope="sc">
            <span v-if="sc.row.typeId == 0">初诊</span>
            <span v-if="sc.row.typeId == 1">复诊</span>
            <span v-if="sc.row.typeId == 2">急诊</span>
          </template>
        </el-table-column>
        <el-table-column property="caseResult" label="就诊结果" width="" />
        <el-table-column label="创建时间" width="">
          <template slot-scope="sc">
            {{ new Date(sc.row.addtime).toLocaleDateString() }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 编辑框 -->
    <el-dialog title="修改页面" :visible.sync="updatapatient">
      <!-- 1患者信息 -->
      <el-descriptions title="患者信息">
        <el-descriptions-item label="患者名">
          <el-input class="hzinput" v-model="hz.name"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="手机号">
          <el-input
            :id="inid"
            oninput="value=value.replace(/[^\d.]/g,'')"
            class="hzinput"
            v-model="hz.php"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="生日">
          <el-input
            type="date"
            class="hzinput"
            v-model="hz.birthday"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="居住地">
          <el-input class="hzinput" v-model="hz.address"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="注册时间">
          <el-input disabled class="hzinput" v-model="hz.createTime"></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updatapatient = false">取 消</el-button>
        <el-button type="primary" @click="updatePatient()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { loading,Sloading} from "../../api/doctor/tools/loading";
import {
  getAllPatient,
  selectpatientbynameAndphp,
  getAllHistoryByPatientId,
  updatePatientInfo,
} from "../../api/doctor/patient";
import { open2,open3, open4 } from "../../api/doctor/tools/alert";

export default {
  name: "Patient",
  data() {
    return {
      //编辑框里手机号字体颜色
      inid:"re1",
      //患者列表
      patientlist: [],

      //模糊查询
      patient: {
        name: "",
        php: "",
      },
      //分页=当前页
      currentPage: 1,
      pageSize: 8,

      //查看框
      hz: {
        id: "",
        name: "",
        php: "",
        birthday: "",
        address: "",
        createTime: "",
        //比较对象
        oldname: "",
        oldphp: "",
        oldbirthday: "",
        oldaddress: "",
        //病例
        historylist: [],
      },
      updatapatient: false,
      selectpatient: false,
    };
  },
  methods: {
    //修改患者信息
    updatePatient() {
      if(!this.comparison()){
         open3(this,'未有任何修改')
         return 
      }
      if(this.hz.name==''){
        open3(this,'姓名不能为空')
        return;
      }
     
      const reg = /^1[345789]\d{9}$/
      if(!reg.test(this.hz.php)){
          open3(this, "手机号不合法");
        return;
      }


      let data = {
        patientId: this.hz.id,
        name: this.hz.name,
        birthday:this.hz.birthday,
        mobile: this.hz.php,
        address: this.hz.address,
      };
      updatePatientInfo(data).then((re) => {
        if (re.code == 200) {
          this.updatapatient = false;
          open2(this, "修改成功");
          getAllPatient().then((re) => {
            this.patientlist = re.data;
          });
        } else {
          open4(this, "修改失败，请检查网络");
        }
      });
    },

    //查看和编辑
    viewdata(e, el) {
      this.hz.id = e.patientId;
      this.hz.name = e.name;
      this.hz.php = e.mobile;
      this.hz.birthday = e.birthday;
      this.hz.address = e.address;
      this.hz.createTime = new Date(e.createTime).toLocaleDateString();
      if (el == 1) {
        //查看
        this.selectpatient = true;
        getAllHistoryByPatientId({ patientid: e.patientId }).then((re) => {
          this.hz.historylist = re.data;
        });
      } else {
        //编辑
          this.hz.oldname = e.name;
          this.hz.oldphp = e.mobile;
          this.hz.oldbirthday = e.birthday;
          this.hz.oldaddress = e.address;
        this.updatapatient = true;
      }
    },

    //模糊查询
    selectpatientbynameAndphp() {
      selectpatientbynameAndphp({
        name: this.patient.name,
        php: this.patient.php,
      }).then((re) => {
        this.patientlist = re.data;
      });
    },
    //分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //重置
    reslt() {
      this.patient.name = "";
      this.patient.php = "";
      this.selectpatientbynameAndphp();
    },
    //比较
    comparison(){
        if(this.hz.name!=this.hz.oldname){
            return true
        }
          if(this.hz.php!=this.hz.oldphp){
            return true
        }
          if(this.hz.birthday!=this.hz.oldbirthday){
            return true
        }
        
          if(this.hz.address!=this.hz.oldaddress){
             alert("address")
            return true
        }
        return false
    }
  },
  mounted() {
    getAllPatient().then((re) => {
      this.patientlist = re.data;
    });
  },
  watch:{
    "hz.php"(){
        let reg = /^1[345789]\d{9}$/
         let fig= reg.test(this.hz.php)
        console.log(this)
        if(fig){
            this.inid='re1'
        }else{  
            this.inid='re2'
        }
       
    }
  }
};
</script>

<style scoped>
*{
  font-weight: bold;
}
.el-input {
  width: 200px;
}
.hzinput {
  margin-top: 0px;
  width:170px
}
#re2 {
  color: brown;
}
#re1 {
  color: black;
}
#patient{
box-shadow:  0px 0px 15px #98d3e7;
}
</style>
